import Taro, { Component } from '@tarojs/taro'
import {View, ScrollView, Text, Image } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { getWindowHeight } from '@utils/style'
import classNames from 'classnames'
import * as actions from '@actions/coupon'
import './coupon.scss'

const tabList = [ '未使用', '已使用', '已失效']
const PAGE_SIZE = 20

@connect(state => state.coupon, { ...actions })
class Coupon extends Component {
  config = {
    navigationBarTitleText: '优惠券'
  }

  constructor(props) {
    super(props)
    this.state = {
      couponList: [],
      page: 1,
      showType: 0
    }
  }

  componentDidMount() {
  }

  handleSwitchTab (type) {
    this.setState({
      showType: type,
      couponList: [],
      page: 1
    })
    // this.loadOrderList(type, 1)
  }

  render() {
    const {couponList, showType} = this.state;
    const height = getWindowHeight(false)
    return (
      <View className='container'>
        <View className='coupon-list__tab'>
          {tabList.map((item, index) => (
            <View
              key={'tab' + index}
              className='coupon-list__tab__item'
              onClick={this.handleSwitchTab.bind(this, index)}
            >
              <Text className={classNames('coupon-list__tab__item-txt', index === showType && 'coupon-list__tab__item-txt--active')}>{item}</Text>
              {index === showType &&
              <View className='coupon-list__tab__item-line' />
              }
            </View>
          ))}
        </View>

        <ScrollView
          scrollY
          scrollTop='0'
          lowerThreshold='10'
          onScrolltolower={this.onLoadOrder.bind(this)}
          className='coupon-list'
          style={{ height }}
        >
          {
            couponList.map(item => {
              return <View className='item' key={item.id} onClick={this.getCoupon} data-index={item.id}>
                <View className='tag'>{item.tag}</View>
                <View className='content'>
                  <View className='left'>
                    <View className='discount'>{item.discount}元</View>
                    <View className='min'> 满{item.min}元使用</View>
                  </View>
                  <View className='right'>
                    <View className='name'>{item.name}</View>
                    {
                      item.days != 0 ? <View className='time'>有效期：{item.days}天</View> : <View className='time'> 有效期：{item.startTime} - {item.endTime}</View>
                    }
                  </View>
                </View>
                <View className='condition'>
                  <Text className='txt'>{item.desc}</Text>
                  <Image src={item.pic} className='icon'></Image>
                </View>
              </View>
            })
          }

        </ScrollView>

      </View>
    );
  }
}

export default Coupon
